<body>
  不支持effect嵌套会怎么样
</body>
<script>
  let activeEffect = null
  const bucket = new WeakMap()
  // 1、测试数据
  const data = {
    foo: true,
    bar: true
  }

  const obj = new Proxy(data, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, newVal) {
      target[key] = newVal
      trigger(target, key)
    }
  })

  function track(target, key) {
    if (!activeEffect) return
    let depMap = bucket.get(target)
    if (!depMap) {
      bucket.set(target, (depMap = new Map()))
    }

    let deps = depMap.get(key)
    if (!deps) {
      depMap.set(key, (deps = new Set()))
    }
    const effectSet = deps.add(activeEffect)
    activeEffect.deps.push(effectSet)
  }

  function trigger(target, key) {
    let depMap = bucket.get(target)
    if (!depMap) return
    const depsSet = depMap.get(key)
    const effectsToRun = new Set(depsSet)
    effectsToRun && effectsToRun.forEach(effectFn => effectFn())
  }

  function effect(fn) {
    function effectFn() {
      cleanup(effectFn)
      activeEffect = effectFn //注册 effectFn 内存指针, 用于 deps.add(activeEffect)
      fn()
    }
    effectFn.deps = [] //反向收集 effectSet的引用
    effectFn()
  }
  function cleanup(effectFn) {
    effectFn.deps.forEach(depSet => {
      depSet.delete(effectFn)
    })
    effectFn.deps.length = 0
  }

  //   2、全局变量
  let temp1, temp2
  //   3、测试嵌套
  effect(function effectFn1() {
    console.log('effectFn1执行')

    effect(function effectFn() {
      console.log('effectFn2执行')
      temp2 = obj.bar //   在 effectFn2 中读取 obj.bar属性
    })
    temp1 = obj.foo //   在effectFn1 中读取 obj.foo属性
  })
  obj.foo = 123 //effectFn的副作用被覆盖了，问题出现在 activeEffect = effectFn
</script>
